import React from 'react';
import { Drawer, Form, Input, Button, Space } from 'antd';
import {  createPackage } from '@/services/ant-design-pro/package';
const CreateOrUpdateForm: React.FC<{
  visible: boolean;
  onClose: () => void;
  onOk: () => void;
  currentData?: any; // 传入当前编辑的数据
}> = ({ visible, onClose, onOk, currentData }) => {
  const [form] = Form.useForm();

  React.useEffect(() => {
    if (visible) {
      form.setFieldsValue(currentData || {});
    }
  }, [visible, currentData]);

  return (
    <Drawer
      title={currentData ? '编辑套餐' : '新建套餐'}
      placement="right"
      onClose={onClose}
      open={visible}
      width={400}
      footer={
        <div
          style={{
            textAlign: 'right',
          }}
        >
          <Space>
            <Button onClick={onClose}>取消</Button>
            <Button
              type="primary"
              onClick={() => {
                form.validateFields().then((values) => {
                  // 提交表单数据
                  console.log(values); // 在此调用创建或更新接口
                  onOk();
                });
              }}
            >
              提交
            </Button>
          </Space>
        </div>
      }
    >
      <Form form={form} layout="vertical">
        <Form.Item
          name="title"
          label="标题"
          rules={[{ required: true, message: '请输入标题' }]}
        >
          <Input placeholder="请输入标题" />
        </Form.Item>
        <Form.Item name="subTitle" label="副标题">
          <Input placeholder="请输入副标题" />
        </Form.Item>
        {/* 其他表单项 */}
      </Form>
    </Drawer>
  );
};

export default CreateOrUpdateForm;
